<script type="text/javascript" src="{$base_dir}js/selectboxes.js"></script>
<div>
<input type="hidden" value="{$radGroupId}" id="radGroupId" name="radGroupId">
<table style="width: 100%" cellpadding="0" cellspacing="0">
    <caption style="text-transform: uppercase">{$groupName}&nbsp;</caption>
    <tr>
        <td class="label">{translate}Services are not in group yet{/translate}</td>
        <td>&nbsp;</td>
        <td class="label">{translate}Services are in group{/translate}</td>
    </tr>
    <tr>
        <td>
            <select id="unMappedServiceLbx" size="20" multiple="multiple" style="width: 280px;">
                {html_options options=$unMappedServiceList}
            </select>
        </td>
        <td style="vertical-align: top; text-align: center; width: 50px;">
			<input type="button" class="button_link" value="&gt;&gt;" onclick="javascript:moveItem('add')">
			<br/><br/>
			<br/><br/>
			<input type="button" class="button_link" value="&lt;&lt;" onclick="javascript:moveItem('remove')">
		</td>
		<td>
            <select id="mappedServiceLbx" size="20" multiple="multiple" style="width: 280px;">
                {html_options options=$mappedServiceList}
            </select>
        </td>
    </tr>
</table>
</div>